<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useSubCategory } from './composables/useSubCategory.js'
import { useCategoryGoodsTemporary } from './composables/useCategoryGoodsTemporary.js'
import ProductItem from '@/components/ProductItem.vue'

const { categorySubGoods } = useSubCategory()
const { searchObj, categoryGoodsTemporary, handleClick, load } = useCategoryGoodsTemporary()
</script>

<template>
  <div
    v-infinite-scroll="load"
    class="infinite-list"
    infinite-scroll-delay="1000"
    :infinite-scroll-disabled="categoryGoodsTemporary.items.length == categoryGoodsTemporary.counts"
    v-if="categoryGoodsTemporary.items"
  >
    <div class="sub-category w">
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/category/${categorySubGoods.parentId}` }">{{
            categorySubGoods?.parentName || ''
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/category/${categorySubGoods.id}` }">{{
            categorySubGoods?.name || ''
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="goods-list">
        <el-tabs
          type="border-card"
          v-model="searchObj.sortField"
          class="demo-tabs"
          @tab-change="handleClick"
        >
          <el-tab-pane label="最新商品" name="publishTime">
            <ul>
              <li
                v-for="goods in categoryGoodsTemporary.items || []"
                v-if="categoryGoodsTemporary.items"
              >
                <router-link :to="{ path: `/goods/detail/${goods.id}` }">
                  <product-item :goods="goods"></product-item>
                </router-link>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="最高人气" name="orderNum">
            <ul>
              <li
                v-for="goods in categoryGoodsTemporary.items || []"
                v-if="categoryGoodsTemporary.items"
              >
                <router-link :to="{ path: `/goods/detail/${goods.id}` }">
                  <product-item :goods="goods"></product-item>
                </router-link>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="评论最多" name="evaluateNum">
            <ul>
              <li
                v-for="goods in categoryGoodsTemporary.items || []"
                v-if="categoryGoodsTemporary.items"
              >
                <router-link :to="{ path: `/goods/detail/${goods.id}` }">
                  <product-item :goods="goods"></product-item>
                </router-link>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sub-category {
  .breadcrumb {
    .el-breadcrumb {
      height: 100%;
      line-height: 60px;
    }
  }

  .goods-list {
    margin-top: 20px;

    ul {
      display: flex;
      gap: 20px;
      justify-content: left;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
